<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('党员评价')" />
    <style>
      body {
        background: linear-gradient(135deg, #4b0000, #2b0000);
        color: #fff;
        font-family: "Microsoft YaHei", sans-serif;
        margin: 0;
        padding: 0;
        overflow: auto; /* 允许页面整体滚动 */
      }

      .dashboard-container {
        width: 100%;
        min-height: 100vh;
        padding: 20px;
        box-sizing: border-box;
      }

      .dashboard-header {
        text-align: center;
        margin-bottom: 20px;
      }

      .dashboard-title {
        font-size: 2.5em;
        margin: 0;
        background: linear-gradient(to right, #ffd700, #ffa500);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
      }

      .dashboard-subtitle {
        font-size: 1.2em;
        color: #ffa5a5;
        margin-top: 10px;
      }

      .dashboard-content {
        display: flex;
        gap: 20px;
        min-height: calc(100vh - 120px);
      }

      .member-selector {
        flex: 1;
        background: rgba(100, 0, 0, 0.7);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(200, 50, 50, 0.8);
        display: flex;
        flex-direction: column;
      }

      .member-selector h2 {
        margin-top: 0;
        color: #ffcc00;
        border-bottom: 2px solid rgba(200, 50, 50, 0.8);
        padding-bottom: 10px;
      }

      .search-box {
        display: flex;
        margin-bottom: 20px;
      }

      .search-input {
        flex: 1;
        padding: 12px;
        border: 1px solid #ffcc00;
        border-radius: 8px 0 0 8px;
        background: rgba(50, 0, 0, 0.7);
        color: white;
        font-size: 1em;
      }

      .search-btn {
        padding: 12px 20px;
        background: linear-gradient(135deg, #ff3333, #cc0000);
        color: white;
        border: none;
        border-radius: 0 8px 8px 0;
        cursor: pointer;
        font-weight: bold;
      }

      .member-list {
        flex: 1;
        overflow-y: auto;
        max-height: 500px; /* 设置最大高度以启用滚动条 */
      }

      .member-item {
        padding: 15px;
        margin-bottom: 10px;
        background: rgba(80, 0, 0, 0.6);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid transparent;
      }

      .member-item:hover {
        background: rgba(120, 0, 0, 0.8);
        transform: translateX(5px);
        border: 1px solid #ffcc00;
      }

      .member-item.selected {
        background: rgba(150, 0, 0, 0.9);
        border: 1px solid #ffcc00;
        box-shadow: 0 0 15px rgba(255, 204, 0, 0.7);
      }

      .member-name {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .member-branch {
        font-size: 0.9em;
        color: #ff9999;
      }

      .member-stats {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 0.9em;
      }

      .stat-item {
        text-align: center;
      }

      .stat-value {
        font-weight: bold;
        color: #ffcc00;
      }

      .overview-panel {
        flex: 2;
        background: rgba(100, 0, 0, 0.7);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(200, 50, 50, 0.8);
        display: flex;
        flex-direction: column;
      }

      .overview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .member-profile {
        display: flex;
        align-items: center;
      }

      .profile-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff3333, #cc0000);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        font-weight: bold;
        margin-right: 20px;
      }

      .profile-info h2 {
        margin: 0 0 10px 0;
        color: #ffcc00;
      }

      .profile-detail {
        margin: 5px 0;
        font-size: 0.9em;
        color: #ffcccc;
      }

      .score-summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin-top: 20px;
      }

      .score-card {
        background: rgba(80, 0, 0, 0.6);
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        border: 1px solid rgba(200, 50, 50, 0.8);
      }

      .score-title {
        font-size: 0.9em;
        color: #ff9999;
        margin-bottom: 10px;
      }

      .score-value {
        font-size: 2em;
        font-weight: bold;
        background: linear-gradient(to right, #ffcc00, #ff9900);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .charts-panel {
        flex: 2;
        background: rgba(100, 0, 0, 0.7);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(200, 50, 50, 0.8);
        margin-top: 20px;
      }

      .charts-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .charts-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        min-height: 400px; /* 设置最小高度以确保内容区域足够大 */
      }

      .chart-box {
        background: rgba(80, 0, 0, 0.6);
        border-radius: 10px;
        padding: 15px;
        border: 1px solid rgba(200, 50, 50, 0.8);
      }

      .chart-title {
        text-align: center;
        margin: 0 0 15px 0;
        color: #ffcc00;
        font-size: 1.1em;
      }

      .chart-placeholder {
        height: 300px; /* 固定图表占位符高度 */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff9999;
        font-style: italic;
      }

      /* 滚动条样式 */
      .member-list::-webkit-scrollbar {
        width: 8px;
      }

      .member-list::-webkit-scrollbar-track {
        background: rgba(50, 0, 0, 0.5);
      }

      .member-list::-webkit-scrollbar-thumb {
        background: #ff3333;
        border-radius: 4px;
      }

      .member-list::-webkit-scrollbar-thumb:hover {
        background: #ff6666;
      }

      /* 响应式设计 */
      @media (max-width: 1200px) {
        .dashboard-content {
          flex-direction: column;
        }

        .member-selector,
        .overview-panel {
          flex: none;
        }

        .charts-panel {
          margin-top: 20px;
        }
      }

      .loading {
        text-align: center;
        padding: 20px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="dashboard-container">
      <div class="dashboard-header">
        <h1 class="dashboard-title">党员评价分析大屏</h1>
        <p class="dashboard-subtitle">实时展示党员学习情况与综合评价得分</p>
      </div>

      <div class="dashboard-content">
        <div class="member-selector">
          <h2>党员选择</h2>
          <div class="search-box">
            <input
              type="text"
              class="search-input"
              placeholder="搜索党员姓名或支部..."
              id="searchInput"
            />
            <button class="search-btn" onclick="searchMembers()">
              <i class="fa fa-search"></i>
            </button>
          </div>
          <div class="member-list" id="memberList">
            <div class="loading">正在加载数据...</div>
          </div>
        </div>

        <div class="overview-panel">
          <div class="overview-header">
            <div class="member-profile">
              <div class="profile-avatar"></div>
              <div class="profile-info">
                <h2></h2>
                <div class="profile-detail">
                  <i class="fa fa-building"></i>
                  <span id="profileBranch"></span>
                </div>
                <div class="profile-detail">
                  <i class="fa fa-calendar"></i> 入党时间：<span
                    id="joinPartyDate"
                  ></span>
                </div>
                <div class="profile-detail">
                  <i class="fa fa-star"></i> <span id="excellentMember"></span>
                </div>
              </div>
            </div>
            <div class="score-summary">
              <div class="score-card">
                <div class="score-title">学习总时长</div>
                <div class="score-value" id="studyHours">0</div>
                <div>小时</div>
              </div>
              <div class="score-card">
                <div class="score-title">平均得分</div>
                <div class="score-value" id="averageScore">0</div>
                <div>分</div>
              </div>
              <div class="score-card">
                <div class="score-title">学习完成率</div>
                <div class="score-value" id="completionRate">0%</div>
              </div>
              <div class="score-card">
                <div class="score-title">综合排名</div>
                <div class="score-value" id="overallRank">0/0</div>
              </div>
            </div>
          </div>
          <div class="charts-panel">
            <div class="charts-header">
              <h2>学习情况与评价分析</h2>
            </div>
            <div class="charts-container">
              <div class="chart-box">
                <div class="chart-title">月度学习时长趋势</div>
                <div class="chart-placeholder">
                  <div>月度学习时长趋势图</div>
                </div>
              </div>
              <div class="chart-box">
                <div class="chart-title">学习内容分布</div>
                <div class="chart-placeholder">
                  <div>学习内容分布饼图</div>
                </div>
              </div>
              <div class="chart-box">
                <div class="chart-title">评价得分雷达图</div>
                <div class="chart-placeholder">
                  <div>评价得分雷达图</div>
                </div>
              </div>
              <div class="chart-box">
                <div class="chart-title">支部排名对比</div>
                <div class="chart-placeholder">
                  <div>支部排名对比柱状图</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: footer" />

    <script type="text/javascript">
      // 页面加载完成后初始化
      $(function () {
        // 获取党员数据
        loadMemberData();

        // 设置回车搜索
        $("#searchInput").on("keypress", function (e) {
          if (e.which == 13) {
            searchMembers();
          }
        });

        // 设置实时搜索（输入时延迟搜索）
        let searchTimer;
        $("#searchInput").on("input", function () {
          clearTimeout(searchTimer);
          searchTimer = setTimeout(function () {
            const keyword = $("#searchInput").val().trim();
            if (allMembersData.length > 0) {
              // 如果数据已加载，直接过滤
              filterAndDisplayMembers(keyword);
            } else {
              // 如果数据未加载，先加载数据
              loadMemberData(keyword);
            }
          }, 300); // 300ms延迟，更快响应
        });
      });

      // 全局变量存储所有数据
      let allMembersData = [];
      let allDeptMap = {};

      // 加载党员数据
      function loadMemberData(searchKeyword = "") {
        // 如果已经有数据，直接进行过滤
        if (allMembersData.length > 0) {
          filterAndDisplayMembers(searchKeyword);
          return;
        }

        // 显示加载状态
        $("#memberList").html('<div class="loading">正在加载党员数据...</div>');

        // 获取党员列表
        $.ajax({
          url: ctx + "system/partymember/member/list",
          type: "POST",
          data: {},
          dataType: "json",
          success: function (response) {
            const members = response.rows;

            if (!members || members.length === 0) {
              $("#memberList").html('<div class="loading">暂无党员数据</div>');
              clearMemberDetail();
              return;
            }

            // 获取部门信息
            $.ajax({
              url: ctx + "system/dept/list",
              type: "POST",
              dataType: "json",
              success: function (deptData) {
                // 创建部门映射
                const deptMap = {};
                deptData.forEach((dept) => {
                  deptMap[dept.deptId] = dept.deptName;
                });

                // 存储到全局变量
                allMembersData = members;
                allDeptMap = deptMap;

                // 过滤并显示数据
                filterAndDisplayMembers(searchKeyword);
              },
              error: function () {
                $("#memberList").html(
                  '<div class="loading">数据加载失败</div>'
                );
              },
            });
          },
          error: function () {
            $("#memberList").html('<div class="loading">数据加载失败</div>');
          },
        });
      }

      // 过滤并显示党员数据
      function filterAndDisplayMembers(searchKeyword = "") {
        let filteredMembers = allMembersData;

        // 如果有搜索关键词，进行过滤
        if (searchKeyword && searchKeyword.trim() !== "") {
          const keyword = searchKeyword.trim().toLowerCase();
          filteredMembers = allMembersData.filter((member) => {
            // 搜索党员姓名、部门名称
            const memberName = (member.name || "").toLowerCase();
            const deptName = (allDeptMap[member.deptId] || "").toLowerCase();

            return memberName.includes(keyword) || deptName.includes(keyword);
          });
        }

        // 检查过滤结果
        if (filteredMembers.length === 0) {
          if (searchKeyword && searchKeyword.trim() !== "") {
            $("#memberList").html(
              '<div class="loading">未找到匹配的党员信息</div>'
            );
          } else {
            $("#memberList").html('<div class="loading">暂无党员数据</div>');
          }
          clearMemberDetail();
          return;
        }

        // 渲染过滤后的党员列表
        renderMemberList(filteredMembers, allDeptMap);

        // 默认加载第一个党员的详细信息
        if (filteredMembers.length > 0) {
          loadMemberDetail(
            filteredMembers[0].id,
            filteredMembers[0],
            allDeptMap
          );
          $(".member-item:first").addClass("selected");
        }
      }

      // 渲染党员列表
      function renderMemberList(members, deptMap) {
        const memberList = $("#memberList");
        memberList.empty();

        members.forEach((member) => {
          const deptName = deptMap[member.deptId] || "未知支部";
          const isExcellent =
            member.isExcellent === "1"
              ? '<span style="color: gold; float: right;">★ 优秀党员</span>'
              : "";

          const memberItem = $(`
                <div class="member-item" onclick="selectMember(this, '${
                  member.id
                }')">
                    <div class="member-name">${member.name} ${isExcellent}</div>
                    <div class="member-branch">${deptName}</div>
                    <div class="member-stats">
                        <div class="stat-item">
                            <div class="stat-label">学习时长</div>
                            <div class="stat-value">${
                              Math.floor(Math.random() * 100) + 50
                            }小时</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">平均得分</div>
                            <div class="stat-value">${(
                              80 +
                              Math.random() * 20
                            ).toFixed(1)}</div>
                        </div>
                    </div>
                </div>
            `);

          memberList.append(memberItem);
        });
      }

      // 选择党员
      function selectMember(element, memberId) {
        // 移除所有选中状态
        document.querySelectorAll(".member-item").forEach((item) => {
          item.classList.remove("selected");
        });

        // 添加选中状态到当前元素
        element.classList.add("selected");

        // 获取选中党员的详细信息
        $.ajax({
          url: ctx + "system/partymember/member/list",
          type: "POST",
          dataType: "json",
          success: function (response) {
            const members = response.rows;
            const selectedMember = members.find(
              (member) => member.id == memberId
            );

            if (selectedMember) {
              // 获取部门信息
              $.ajax({
                url: ctx + "system/dept/list",
                type: "POST",
                dataType: "json",
                success: function (deptData) {
                  // 创建部门映射
                  const deptMap = {};
                  deptData.forEach((dept) => {
                    deptMap[dept.deptId] = dept.deptName;
                  });

                  // 加载党员详细信息
                  loadMemberDetail(memberId, selectedMember, deptMap);
                },
              });
            }
          },
        });
      }

      // 加载党员详细信息
      function loadMemberDetail(memberId, member, deptMap) {
        // 更新头像
        const avatar = member.name.charAt(0);
        $(".profile-avatar").text(avatar);

        // 更新姓名
        $(".profile-info h2").text(member.name);

        // 更新支部
        const deptName = deptMap[member.deptId] || "未知支部";
        $("#profileBranch").text(deptName);

        // 更新入党时间
        $("#joinPartyDate").text(member.joinPartyDate || "未知");

        // 更新优秀党员标识
        const isExcellent =
          member.isExcellent === "1" ? "优秀党员" : "普通党员";
        $("#excellentMember").text(isExcellent);

        // 更新统计数据（这里使用模拟数据，实际应用中应该从后台获取）
        $("#studyHours").text(Math.floor(Math.random() * 100) + 50);
        $("#averageScore").text((80 + Math.random() * 20).toFixed(1));
        $("#completionRate").text(Math.floor(Math.random() * 30 + 70) + "%");

        // 获取党员总数用于排名
        $.ajax({
          url: ctx + "system/partymember/member/list",
          type: "POST",
          dataType: "json",
          success: function (response) {
            const totalMembers = response.total;
            const rank = Math.floor(Math.random() * totalMembers) + 1;
            $("#overallRank").text(rank + "/" + totalMembers);
          },
        });
      }

      // 搜索党员
      function searchMembers() {
        const keyword = document.getElementById("searchInput").value.trim();
        if (allMembersData.length > 0) {
          // 如果数据已加载，直接过滤
          filterAndDisplayMembers(keyword);
        } else {
          // 如果数据未加载，先加载数据
          loadMemberData(keyword);
        }
      }

      // 清空党员详情面板
      function clearMemberDetail() {
        $(".profile-avatar").text("");
        $(".profile-info h2").text("请选择党员");
        $("#profileBranch").text("");
        $("#joinPartyDate").text("");
        $("#excellentMember").text("");
        $("#studyHours").text("0");
        $("#averageScore").text("0");
        $("#completionRate").text("0%");
        $("#overallRank").text("0/0");
      }

      // 页面加载完成后初始化
      $(function () {
        // 初始化图表（实际应用中应使用ECharts或其他图表库）
        console.log("初始化图表...");
      });
    </script>
  </body>
</html>
